<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords"
          th:content="'HTML,Springboot,thymeleaf,markdown,Layui,个人博客,'+${myinfo.getWebname()}+','+${myinfo.getNickname()}"/>
    <title th:text="${myinfo.getWebname()}"></title>
    <link rel="icon" th:href="'/style/images/system/'+${myinfo.getWebicon()}">
    <link rel="stylesheet" href="/dist/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/css/login.css" media="all">
    <script src="/dist/jquery/jquery-3.4.1.min.js"></script>
</head>
<style type="text/css">
    .loginBody {
        background: url(/style/images/system/login_bg.jpg);
        background-size: cover;
    }
</style>
<body class="loginBody">

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">
    <div class="layadmin-user-register-main register">
        <div class="login_face"><img th:src="'/style/images/system/'+${myinfo.getBrandimg()}" class="userAvatar"></div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                       for="LAY-user-login-account"></label>
                <input type="text" name="account" id="LAY-user-login-account" lay-verify="required" placeholder="用户名"
                       maxlength="16" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                       for="LAY-user-login-nickname"></label>
                <input type="nickname" name="nickname" id="LAY-user-login-nickname" lay-verify="required" maxlength="32"
                       placeholder="昵称" class="layui-input">
            </div>

            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                       for="LAY-user-login-password"></label>
                <input type="password" name="password" lay-verify="password" id="LAY-user-login-password"
                       placeholder="请输入密码" class="layui-input">
            </div>

            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                       for="LAY-user-login-password-conf"></label>
                <input type="password" name="passwordconf" lay-verify="password" id="LAY-user-login-password-conf"
                       placeholder="请再次输入密码" class="layui-input">
            </div>

            <!--<div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"
                       for="LAY-user-login-mobile"></label>
                <input type="text" name="mobile" id="LAY-user-login-mobile" lay-verify="phone"
                       placeholder="请输入您的手机号" class="layui-input">
            </div>-->

            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-note" for="LAY-user-login-email"></label>
                <input type="text" name="email" id="LAY-user-login-email" lay-verify="email" onchange="clearMailCode()"
                       placeholder="请输入您的邮箱" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                               for="LAY-user-login-vercode"></label>
                        <input type="text" maxlength="10" name="vercode" id="LAY-user-login-vercode"
                               lay-verify="required" placeholder="图形验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <img src="/verifyCode" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode"
                                 onclick="this.src='/verifyCode?'+Math.random()" title="点击刷新验证码">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                               for="LAY-user-login-smscode"></label>
                        <input type="text" maxlength="6" name="smscode" id="LAY-user-login-smscode" placeholder="邮箱验证码"
                               class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <button type="button" id="getmailcode" class="layui-btn layui-btn-primary layui-btn-fluid"
                                    lay-submit lay-filter="LAY-user-getsmscode">获取验证码
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" align="center">
                <button class="layui-btn layui-btn-fluid " lay-submit lay-filter="LAY-user-register-submit">立即注册
                </button>
            </div>
            <div class="layui-trans layui-form-item layadmin-user-login-other">
                <a href="/user/login" class="layadmin-user-jump-change layadmin-link">立即登录</a>
                <a href="/index" class="layadmin-user-jump-change-left layadmin-link">返回首页</a>
            </div>
        </div>
    </div>
    <!--<div class="layui-trans layadmin-user-login-footer">
        <p th:text="${myinfo.getRecord()}"></p>
    </div>-->

</div>
<script src="/dist/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer;
        //自定义验证规则
        form.verify({
            username: [
                /^[\S]{6,16}$/
                , '用户名必须是6到16位，且不能出现空格'
            ],
            password: [
                /^[\S]{6,16}$/
                , '密码长度必须是6到16位，且不能出现空格'
            ]
        });

        //提交
        form.on('submit(LAY-user-register-submit)', function (data) {
            if (data.field.password !== data.field.passwordconf) {
                return layer.msg('两次密码输入不一致', {icon: 2});
            }
            var mailcode = $('#LAY-user-login-smscode').val();
            if (mailcode == '') {
                return layer.msg('请输入邮箱验证码');
            }
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/register",//url
                data: data.field,
                success: function (result) {
                    if (result.flag == "success") {
                        //layer.msg("注册成功！", {icon: 1});
                        //跳转到个人信息填写页面
                        layer.confirm('注册成功,是否立即登录？', {icon: 3, title: '提示信息'}, function (index) {
                            window.location.href = "/user/login";
                        });
                    } else if (result.flag == "exsit_account") {
                        layer.msg("帐号已存在！");
                        document.getElementById("LAY-user-get-vercode").src = "/verifyCode?" + Math.random();
                    } else if (result.flag == "exsit_nickname") {
                        layer.msg("用户名已存在！");
                        document.getElementById("LAY-user-get-vercode").src = "/verifyCode?" + Math.random();
                    } else if (result.flag == "vercode_error") {
                        layer.msg("验证码错误或已过期！");
                        $('#LAY-user-login-vercode').val('');
                        document.getElementById("LAY-user-get-vercode").src = "/verifyCode?" + Math.random();
                    } else if (result.flag == "failed_smscode") {
                        layer.msg("邮箱验证码错误，请重新输入！");
                        $('#LAY-user-login-smscode').val('');
                    } else if (result.flag == "failed_smscode_timeout") {
                        layer.msg("邮箱验证码超时，请重新获取！");
                        $('#LAY-user-login-smscode').val('');
                    }
                }, error: function () {
                    layer.msg("登录失败，请重试！");
                    document.getElementById("LAY-user-get-vercode").src = "/verifyCode?" + Math.random();
                }
            });
        });
        /*$("#LAY-user-getsmscode").click(function () {*/
        form.on('submit(LAY-user-getsmscode)', function (data) {
            var vercode = $('#LAY-user-login-vercode').val();
            if (vercode == '') {
                layer.msg("请输入验证码！");
                return;
            }
            var mailaccount = $('#LAY-user-login-email').val();
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/sendmail",//url
                data: {
                    "mailaccount": mailaccount,
                    "vercode": vercode,
                },
                success: function (result) {
                    if (result.flag == "success") {
                        layer.msg("邮箱验证码已发送");

                        let count = 30;
                        const countDown = setInterval(() => {
                            if (count == 0) {
                                $('#getmailcode').text('重新发送');
                                $('#getmailcode').removeAttr('disabled');
                                $('#getmailcode').removeClass('layui-btn-disabled');
                                clearInterval(countDown);
                            } else {
                                $('#getmailcode').attr("disabled", "disabled");
                                $('#getmailcode').addClass("layui-btn-disabled");
                                $('#getmailcode').text(count + 's后重新获取');
                            }
                            count--;
                        }, 1000);

                    } else if (result.flag == "failed_vercode") {
                        layer.msg("图片验证码错误或已过期！");
                        $('#LAY-user-login-vercode').val('');
                        document.getElementById("LAY-user-get-vercode").src = "/verifyCode?" + Math.random();
                    } else if (result.flag == "exsit_email") {
                        layer.msg("该邮箱已被注册，请重新输入！");
                        $('#LAY-user-login-vercode').val('');
                        document.getElementById("LAY-user-get-vercode").src = "/verifyCode?" + Math.random();
                    } else if (result.flag == "failed") {
                        layer.msg("发送验证码失败，请重试！");
                    }
                }, error: function () {
                    layer.msg("邮箱验证码发送失败，请重试！");
                }
            });
        });
    });

    function clearMailCode() {
        $('#LAY-user-login-smscode').val('');
    }
</script>
</body>
</html>